<template>
	<view class="content">
		<loading ref="loading"></loading>
		<view class="" v-if="loadFlag">
			<u-navbar :is-back="false" :title="vk.getVuex('$setting.base.search')?vk.getVuex('$setting.base.name'):' '" :background="{backgroundColor: vk.getVuex('$app.config.bg.navbar')}" :title-color="vk.getVuex('$app.config.color.main')" :border-bottom="false">
				<view class="slot-wrap">
					<view class="u-flex u-row-between" style="width: 100%;" v-if="!vk.getVuex('$setting.base.search')">
						<view class="" style="width: 52rpx;height: 52rpx;position: relative;">
							<u-icon name="/static/icon/shares.png" size="52"></u-icon>
							<button open-type="share" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
						</view>
						<view class="search u-flex u-row-left" @click="search" style="z-index: 1000;" :style="{color: vk.getVuex('$app.config.color.light'),background: vk.getVuex('$app.config.bg.search')}">
							<u-icon name="/static/search.png" size="28"></u-icon>
							<text class="u-p-l-15">请输入关键字搜索</text>
						</view>
					</view>
				</view>
			</u-navbar>
			<!-- <view class="ranking u-p-l-20 u-p-t-20 u-flex u-row-left">
				<view class="tab u-flex-col u-col-center u-row-center" hover-class="cate-active" hover-stay-time="50" @click="listClick('ranking',0)">
					<view class="">热门榜</view>
					<view class="u-font-10 u-p-t-10 eng">Hot download</view>
				</view>
				<view class="tab u-flex-col u-col-center u-row-center" hover-class="cate-active" hover-stay-time="50" @click="listClick('ranking',1)">
					<view class="">点赞榜</view>
					<view class="u-font-10 u-p-t-10 eng">Like ranking</view>
				</view>
				<view class="tab u-flex-col u-col-center u-row-center" hover-class="cate-active" hover-stay-time="50" @click="listClick('ranking',2)">
					<view class="">下载榜</view>
					<view class="u-font-10 u-p-t-10 eng">Download ranking</view>
				</view>
			</view> -->
			<view class="tags u-p-l-20 u-p-t-30" v-if="zodiacList.length > 0">
				<u-section title="标签" :color="vk.getVuex('$app.config.color.main')" :line-color="vk.getVuex('$app.config.color.sec')" :bold="false" font-size="32" :right="false"></u-section>
				<view class="u-flex u-row-left u-flex-wrap u-p-t-30">
					<view class="tag" :style="{background: vk.getVuex('$app.config.bg.tab'), color: vk.getVuex('$app.config.color.tips')}" @click="listClick('tags',item.name)" v-for="(item, index) in zodiacList" :key="index">{{item.name}}</view>
				</view>
			</view>
			<view class="category u-p-l-20 u-p-t-30" v-if="categoryBzList.length > 0">
				<u-section title="壁纸分类" :color="vk.getVuex('$app.config.color.main')" :line-color="vk.getVuex('$app.config.color.sec')" :bold="false" font-size="32" :right="false"></u-section>
				<view class="u-flex u-row-left u-flex-wrap u-p-t-30">
					<view class="cate" @click="listClick('category',index)" v-for="(item, index) in categoryBzList" :key="index">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="mengb"></view>
						<view class="texts">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="category u-p-l-20 u-p-t-20" v-if="categoryTxList.length > 0">
				<u-section title="头像分类" :color="vk.getVuex('$app.config.color.main')" :line-color="vk.getVuex('$app.config.color.sec')" :bold="false" font-size="32" :right="false"></u-section>
				<view class="u-flex u-row-left u-flex-wrap u-p-t-30">
					<view class="cate" @click="avatarClick(index)" v-for="(item, index) in categoryTxList" :key="index">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="mengb"></view>
						<view class="texts">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="category u-p-l-20 u-p-t-20" v-if="categoryBqbList.length > 0">
				<u-section title="表情包分类" :color="vk.getVuex('$app.config.color.main')" :line-color="vk.getVuex('$app.config.color.sec')" :bold="false" font-size="32" :right="false"></u-section>
				<view class="u-flex u-row-left u-flex-wrap u-p-t-30">
					<view class="cate" @click="lookClick(index)" v-for="(item, index) in categoryBqbList" :key="index">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="mengb"></view>
						<view class="texts">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="u-flex u-row-center u-col-center u-p-t-30 u-p-b-40" v-if="vk.getVuex('$setting.base.copyright_logo') && vk.getVuex('$setting.base.copyright_text')">
				<image :src="vk.getVuex('$setting.base.copyright_logo')" style="width: 33rpx;height: 33rpx;border-radius: 8rpx;opacity: 0.7;border: none;"></image>
				<view class="u-tips-color u-font-13 u-p-l-10" style="color: #404040;">{{vk.getVuex('$setting.base.copyright_text')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadFlag: false,
				background: {
					backgroundColor: '#1F1F1F',
				},
				// 分类页数据
				zodiacList: [], 
				categoryTxList: [],
				categoryBzList: [],
				categoryBqbList: [],
			}
		},
		async onLoad() {
			let that = this
			await that.getCenter()
			that.loadFlag = true
			that.$nextTick(() => {
				that.$refs.loading.closeLoading()
			})
		},
		methods: {
			search(){
				uni.navigateTo({
					url: '/pages/about/search'
				})
			},
			// 分类
			async getCenter(){
				let that = this
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/pub/getCenter',
				});
				that.zodiacList = data.tags.rows
				that.categoryBzList = data.bzcate.rows
				that.categoryTxList = data.txcate.rows
				that.categoryBqbList = data.bqbcate.rows
			},
			listClick(type,value){
				uni.navigateTo({
					url: '/pages/list/list?type='+type+'&value='+value
				})
			},
			avatarClick(index){
				uni.navigateTo({
					url: '/pages/list/avatar?index='+index
				})
			},
			lookClick(index){
				uni.navigateTo({
					url: '/pages/list/look?index='+index
				})
			},
		},
		onShareAppMessage(res) {
			return {
				title: '这里有超多好看的壁纸免费下载~',
				imageUrl: this.vk.getVuex('$setting.base.image'),
				path: 'pages/index/index?inviteId='+(this.vk.getVuex('$user.userInfo._id')?this.vk.getVuex('$user.userInfo._id'):'')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 30rpx;
	}
	.search{
		background: #282828;
		height: 58rpx;
		margin-left: 25rpx;
		padding-left: 30rpx;
		border-radius: 50px;
		width: 100%;
		text{
			color: #808080;
			font-size: 13px;
		}
	}
	.ranking{
		.tab{
			width: 226rpx;
			height: 100rpx;
			margin-right: 16rpx;
			border-radius: 12rpx;
			color: #FFFFFF;
			.eng{
				color: #F5F5F5;
			}
		}
		.tab:nth-child(1){
			background-image: linear-gradient(to bottom right, #8acfaf, #5FBB92, #5FBB92, #8acfaf);
		}
		.tab:nth-child(2){
			background-image: linear-gradient(to bottom right, #f0d35c, #F0B347, #F0B347, #f0d35c);
		}
		.tab:nth-child(3){
			background-image: linear-gradient(to bottom right, #8c99de, #836AF0, #836AF0, #8c99de);
		}
	}
	.tags{
		.tag{
			font-size: 14px;
			background-color: #282828;
			color: #808080;
			border-radius: 40rpx;
			line-height: 60rpx;
			padding: 0 32rpx;
			text-align: center;
			margin-right: 12rpx;
			margin-bottom: 12rpx;
		}
	}
	.category{
		.cate{
			position: relative;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			image{
				width: 226rpx;
				height: 130rpx;
				border-radius: 12rpx;
			}
			.texts{
				position: absolute;
				bottom: 10rpx;
				left: 15rpx;
				color: #FFFFFF;
			}
			.mengb{
				background-color: rgba(0,0,0,0.1);
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				border-radius: 12rpx;
			}
		}
	}
	.cate-active{
		transform:scale(0.95);
		transition: all 0.2s;
	}
</style>
